<template>
	<view>

		<view class="bg_box">
			<image class="bg01" :src="Cfg.Setting.img + 'bg05.png'" mode="widthFix"></image>		
			<view class="bg_content">
				
				<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
					<view class="back iconfont icon-xiangzuo1" @tap.stop="backPage"></view>
					<view class="text">个人中心</view>
				</view>
				

				
					<view class="clear_box"></view>
					<view class="my_box">
						<view class="portrait">
							<image :src="info.avatar" mode="scaleToFill"></image>
						</view>
						<view class="text_box">
							<view class="name">
								<view class="n">{{info.nickname}}</view>									
								<view class="lv" v-if="info.isauth == 0">
									<view class="i iconfont icon-shimingrenzheng"></view>
									<view class="t">未认证</view>
								</view>
								<view class="lv" v-if="info.isauth == 1">
									<view class="i iconfont icon-shimingrenzheng"></view>
									<view class="t">已认证</view>
								</view>
							</view>
							<view class="data">{{info.introduction}}</view>
						</view>

					</view>
					
					<!-- <view class="attestation_box" :data-url="'/pages/index/attestation'" @click="gotopage">
						<image :src="Cfg.Setting.img + 'zj03.png'" mode="widthFix"></image>
					</view> -->
					
					<view class="menu_box">
						<view class="menu">
							<view class="num">{{station.total_num}}</view>
							<view class="text">完成单数</view>
						</view>
						<view class="menu" :data-url="'/pages/personalcenter/balance?money=' + station.total_money" @click="gotopage">
							<view class="num">{{station.total_money}}</view>
							<view class="text">账户盈利</view>
						</view>
						<!-- <view class="menu">
							<view class="num">1</view>
							<view class="text">本月收入</view>
						</view> -->
					</view>
					
					<view class="orther_box">
						<view class="orther_title"><view class="title">常用服务</view></view>
						<view class="order_nav bottomNav">
							<block v-for="(item, index) in otherNav" :key="index">
								<view class="menu" :data-url="item.url" @click="gotopage">
									<view class="icon iconfont" :class="item.img"></view>
									<view class="text">{{ item.text }}</view>
								</view>
							</block>
						</view>
					</view>
					
					<view class="confirm" @tap="signOut">退出登录</view>
					
					
			
				
				
			</view>
		</view>
		

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol: false,
				info:'',
				station:'',
				otherNav: [
					{
						img: 'icon-gouwu',
						text: '骑手装备',
						url: '/pages/personalcenter/equip/equip'
					},
					{
						img: 'icon-a-ziyuan191',
						text: '业主管理',
						url: '/pages/personalcenter/owner/owner'
					},
					{
						img: 'icon-shouhuodizhi',
						text: '收货地址',
						url: '/pages/personalcenter/address/address'
					},
					{
						img: 'icon-dingdan_weixuan',
						text: '我的订单',
						url: '/pages/order/order'
					},
					{
						img: 'icon-a-ziyuan190',
						text: '附近店铺',
						url: '/pages/personalcenter/shop/shop'
					},
					{
						img: 'icon-xitongshezhi',
						text: '系统设置',
						url: '/pages/personalcenter/set'
					},


					
				],

			}
		},
		onLoad(e) {
			let that = this;

		},
		onShow() {
			let that = this;
			that.loadData();
			that.loadStatistics();
		},
		methods: {
			loadStatistics() {
				let that = this;
				that.Net._get('terminal/order_statistics',{}, res => {				
					if(res.code == 200){
						  //console.log(res)
							that.station = res.data
							
					}
					
				});
			},
			loadData() {
				let that = this;
				that.Net._get('terminal/info',{}, res => {				
					if(res.code == 200){
						  //console.log(res)
							that.info = res.data
							
					}
					
				});
			},
			signOut(){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否退出登录',
					success: function(res) {
						if (res.confirm) {
							//console.log('用户点击确定');
							let token_ = 'Bearer ' + that.Net._getToken();
							that.Net._post(
								'logout',{},
								res => {
									//console.log(res);
									if (res.code == 200) {
										uni.setStorageSync('_TOKEN_', null);
										uni.setStorageSync('_AGREEMENT_', null);
										that.Msg.Success('退出登录成功', res => {
											// that.Nav._to({ url: '/pages/public/login', type: 2 });
											uni.reLaunch({											
												url: '/pages/public/login'											
											});
										});
									}
								}
							);
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			let that = this;
			that.info = '';
			setTimeout(function() {
				uni.stopPullDownRefresh();
				that.loadData();
			}, 500);
		},
	}
</script>

<style>
	.clear_box07{
		height: calc(27vw + var(--status-bar-height)) !important;
	}
	.scrrolHeader {
		background-color: #fef2e6 !important;
	}

	.header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
	}

	.clear_box07 {
		height: 27vw;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
		display: block;
	}

	.bg_box .bg_content {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 999;
		padding-bottom: 15vw;
	}
	
	.nav {
		width: 100%;
		height: 13.5vw;
		overflow: hidden;
		overflow-x: auto;
		position: fixed;
		left: 0;
		top: calc(13vw + var(--status-bar-height));
		z-index: 99;
		/* background-color: #fff;
			border-bottom: 1px solid #e8e8e8; */
		box-sizing: border-box;
	}
	
	.nav .navauto {
		width: fit-content;
		display: flex;
		/* margin-left: 4%; */
		min-width: 100%;
	}
	
	.nav .navauto .menu {
		width: 25%;
		position: relative;
	}
	
	.nav .navauto .menu .text {
		font-size: 4vw;
		color: #333;
		text-align: center;
		line-height: 13.5vw;
	}
	
	.nav .navauto .menu .line {
		width: 20%;
		border-radius: 3vw;
		position: absolute;
		left: calc(50% - 10%);
		bottom: 0vw;
		display: none;
	}
	
	.nav .navauto .menu .line image{
		width: 100%;
	}
	
	.menucolor {
		color: #091624 !important;
		font-weight: bold;
		font-size: 4.5vw !important;
	}
	
	.menucolor02 {
		display: block !important;
	}
	
	.menucolor03 {
		background-color: #FF9822 !important;
	}
	
	.order_list{
		width: 92%;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 2vw;
		padding: 3vw;
		box-sizing: border-box;
		margin-top: 4%;
	}
	
	.order_list .service_box{
		width: 100%;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
	}
	
	.order_list .service_box .label{
		padding: 1vw 2vw;
		font-size: 3vw;
		color: #fff;
		border-radius: 8vw 8vw 8vw 2vw;
		margin-right: 1vw;
	}
	
	
	
	.order_list .service_box .label_color01{
		background-color: #0088FE;
	}
	
	.order_list .service_box .label_color02{
		background-color: #06D2AD;
	}
	
	.order_list .service_box .label_color03{
		background-color: #FFA322;
	}
	
	.order_list .service_box .label_color04{
		background-color: #FF4971;
	}
	
	.order_list .service_box .label_color05{
		background-color: #905BF1;
	}
	
	.order_list .service_box .service{
		display: flex;
		align-items: center;
	}
	
	.order_list .service_box .service:nth-child(3){
		flex: 1;
		justify-content: flex-end;
	}
	
	.order_list .service_box .service .time{
		font-size: 3.5vw;
		color: #FD3633;
		margin-right: 0.5vw;
	}
	
	.order_list .service_box .service .text{
		font-size: 3.5vw;
		color: #666666;
	}
	
	.order_list .service_box .service .money{
		font-size: 3.6vw;
		color: #FD3633;
		font-weight: bold;
		margin-right: 0.5vw;
	}
	
	.order_list .service_box .service .type{
		font-size: 3.5vw;
		color: #FF9822;
	}
	
	.order_list .content{
		width: 100%;
		margin-top: 3vw;
	}
	
	.order_list .content .other{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 0.8vw;
	}
	
	.order_list .content .other .icon{
		width: 10vw;
		margin-right: 2vw;
	}
	
	.order_list .content .other .icon image{
		width: 100%;
		display: block;
	}
	
	.order_list .content .other .text{
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.order_list .content .other .distance{
		font-size: 2.8vw;
		color: #999999;
	}
	
	.order_list .content .other .line{
		width: 1px;
		height: 3vw;
		background-color: #DDDDDD;
		margin-left: calc(5vw - 0.5px);
		
	}
	
	.order_list .content .other .remarks{
		font-size: 3.2vw;
		color: #999999;
	}
	
	.order_list .order_menu{
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 2vw;
	}
	
	.order_list .order_menu .menu{
		flex: 1;
		margin-left: 2%;
		background-color: #FF9822;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		font-size: 3.5vw;
		color: #fff;
	}
	
	.order_list .order_menu .menu02{
		background-color: transparent;
		border: 1px solid #DDDDDD;
		box-sizing: border-box;
		color: #333;
	}
	
	.order_list .order_menu .menu:nth-child(1){
		margin-left: 0;
	}
	
	.scrrolHeader{
		background-color: #FF9822;
		transition: 0.5s;
	}
	
	.text-black{color: #222222 !important;}
	.text-blue{color: #FF9822;}
	.tabbar .iconfont{font-size: 24px;padding-bottom: 4px;}
	.cu-bar.tabbar .action.add-action::after{box-shadow: none;}
	.cu-bar.foot{left: 0;}
	.cu-bar .addstl{position: absolute;top: -3vw;left: 5.2vw;z-index: 999;color: #FF9822;font-size: 16vw;background-color: transparent;}
	
	.my_box {
		width: 92%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-top: 3vw;
		padding-left: 1%;
		box-sizing: border-box;
	}
	
	.my_box .portrait {
		width: 19vw;
		height: 19vw;
		border-radius: 50%;
		margin-right: 2vw;
	}
	
	.my_box .portrait image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.my_box .text_box {
		flex: 1;
		margin-top: 3vw;
	}
	
	.my_box .text_box .name {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	
	.my_box .text_box .name .n {
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		display: flex;
		align-items: center;
		width: 55%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}
	
	.my_box .text_box .name .lv {
		height: 6vw;
		line-height: 6vw;
		padding: 0 2vw;
		background-color: #FF7261;
		border-radius: 6vw;
		font-size: 3vw;
		font-weight: 400;
		color: #fff;
		margin-left: 2vw;
		display: flex;
		align-items: center;
	}
	
	.my_box .text_box .name .lv .i{
		font-size: 3.5vw;
		margin-right: 1vw;
	}
	
	.my_box .text_box .data {
		font-size: 3vw;
		color: #999;
		line-height: 3vw;
		display: flex;
		margin-top: 3vw;
	}
	
	.my_box .text_box .data .round {
		width: 1.5vw;
		height: 1.5vw;
		border-radius: 50%;
		background-color: #ff5301;
		margin-top: 0.75vw;
		margin-left: 1.5vw;
	}
	
	.my_box .home {
		width: 6vw;
		margin-top: 3vw;
		margin-right: 4%;
		position: relative;
	}
	
	.my_box .home:nth-child(3){
		margin-right: 6vw;
	}
	
	.my_box .home image{
		width: 100%;
	}
	
	.attestation_box{
		width: 92%;
		margin: 4% auto;
	}
	
	.attestation_box image{
		width: 100%;
	}
	
	.menu_box {
		width: 92%;
		margin: 0 auto;
		display: flex;
		padding: 3vw 0;
		border-radius: 2vw;
		margin-top: 3vw;
		background-color: #fff;
	}
	
	.menu_box .menu {
		flex: 1;
	}
	
	.menu_box .menu .num {
		font-size: 5vw;
		font-weight: bold;
		color: #1d1f24;
		text-align: center;
	}
	
	.menu_box .menu .text {
		font-size: 3.2vw;
		color: #757880;
		text-align: center;
		margin-top: 1vw;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pupu_box .show_box {
		width: 58%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 10vw;
		position: relative;
	}
	
	.pupu_box .show_box .title{
		width: 100%;
		text-align: center;
		margin: 3vw 0;
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
	}
	
	.pupu_box .show_box .input {
		width: 100%;
		height: 13vw;
		border: 1px solid #f5f5f5;
		border-radius: 2vw;
		padding-left: 3vw;
	}
	
	.pupu_box .show_box .input input {
		height: 13vw;
		line-height: 13vw;
		font-size: 3.5vw;
		color: #333;
	}
	
	.pupu_box .show_box .menu {
		width: 100%;
		height: 12vw;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		background-color: #ff7f22;
		color: #fff;
		margin-top: 2vw;
	}
	
	.pupu_box02 {
		width: 100%;
		height: 100%;
		background-color: transparent;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 98;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pupu_box02 .show_box {
		width: 58%;
		background-color: #fff;
		border-radius: 4vw;
		padding: 5vw 10vw;
		position: relative;
		box-shadow: 1px 0px 4.8px 0.2px rgba(51, 51, 51, 0.10);
	}
	
	.pupu_box02 .show_box .textValue{
		font-size: 5vw;
		color: #333;
		font-weight: bold;
		text-align: center;
	}
	
	.pupu_box02 .show_box .menu {
		width: 100%;
		height: 12vw;
		border-radius: 2vw;
		text-align: center;
		line-height: 12vw;
		background-color: #ff7f22;
		color: #fff;
		margin-top: 2vw;
	}
	
	.img_box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		background-color: #fff;
	}
	
	.img_box::after {
		flex: auto;
		content: '';
	}
	
	.img_box .img {
		width: 100%;
		height: 35vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		position: relative;
		margin-top: 2vw;
	}
	
	.img_box .img .xx {
		font-size: 6vw;
		color: #e55557;
		width: 9vw;
		height: 9vw;
		text-align: right;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.img_box .img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}
	
	.img_box .addimg {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-top: 4vw;
		margin-left: 4vw;
		font-size: 15vw;
		line-height: 28vw;
		text-align: center;
		color: #cecece;
	}
	
	.orther_box {
		width: 92%;
		margin: 4% auto 0;
		padding: 4%;
		box-sizing: border-box;
		border-radius: 3vw;
		background-color: #fff;
	}
	
	.orther_title {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.orther_title .title {
		font-size: 4vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}
	
	.orther_title .text {
		font-size: 3.5vw;
		color: #a5a7ad;
	}
	
	.orther_title .arrow {
		font-size: 4vw;
		color: #a5a7ad;
		margin-left: 1vw;
	}
	
	.order_nav {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 4vw;
		justify-content: space-between;
	}
	
	.bottomNav{
		display: flex;
		flex-direction: row;
		justify-content: left;
		flex-wrap: wrap;
	}
	
	.bottomNav::after {
		flex: auto;
		content: "";
		
	}
	
	.order_nav .menu {
		/* flex: 1; */
		margin: 0 !important;
		padding: 0 !important;
		border: 1px solid transparent !important;
		background-color: transparent !important;
		line-height: 6.5vw;
	}
	
	.bottomNav .menu{
		width: 25%;
		margin-top: 4vw !important;
	}
	
	.order_nav .menu .img {
		width: 100%;
		text-align: center;
		position: relative;
	}
	
	.order_nav .menu .img image {
		width: 90%;
	}
	
	.order_nav .menu .icon {
		font-size: 7vw;
		color: #333;
		text-align: center;
		margin-top: 1vw;
	}
	
	.order_nav .menu .img .round {
		height: 4vw;
		padding: 0 1vw;
		box-sizing: border-box;
		border-radius: 50%;
		text-align: center;
		line-height: 4vw;
		font-size: 2.8vw;
		position: absolute;
		right: -2vw;
		top: -2vw;
		background-color: #ff5025;
		color: #fff;
	}
	
	.order_nav .menu .text {
		font-size: 3.5vw;
		text-align: center;
		color: #333333;
		margin-top: 1vw;
	}
	

</style>